<template>
	<view class="content">
		<u-tabs :list="list1" lineColor="rgba(212, 139, 57, 1)" :current="currenttabtow" @click="clicktabtow"
			:activeStyle="{
			    color: '#000000',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			            color: 'rgba(102, 102, 102, 1)',
						fontWeight: 'bold',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
		<u-popup :show="show" mode="center" @close="close" :round="15">
			<u-popup :show="show" mode="center" @close="close" :round="15">
				<view class="text dan">
					<text class="wuliu">物流单号</text>
					<view class="zhongtong">
						<view class="">{{orderDetail.express_name}}</view>
						<view class="text margin_top1">{{orderDetail.express_no}}</view>
					</view>
					<view class="fuzhi">
						<view class="copy" @click="copy">点击复制</view>
					</view>
				</view>
			</u-popup>
		</u-popup>
		<view class="padding_lrb">
			<!--空白页-->
			<view class="zwtimg placeholderimg flexcenter" style="margin-top: 300rpx;" v-if="list.total==0">
				<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
			</view>
			<template v-if="currenttabtow!=4">
				<view v-if="pageShow">
					<view class="ffffff padding border_2 margin_top" v-for="item in list.data" :key="item.order_no"
						@click="xq(item.id)">
						<view class="flexbetween">
							<view class="flexleft">
								<view class="number margin_right2">订单编号：{{item.order_no}}</view>
							</view>
							<!-- 普通订单 -->
							<!-- state 1=待支付,2=待发货,3=待收货,4=待评论,6=已完成,7=已取消 -->
							<!-- order_type 1=到店自提 2=物流配送 -->
							<view class="hongsetext" style="color: rgba(255, 0, 0, 1);" v-if="item.state==1">待支付</view>
							<view class="hongsetext" style="color: #ffa126;" v-if="item.state==2">待发货</view>
							<view class="huangsetext" style="color:rgba(212, 139, 57, 1);"
								v-if="item.state==3 && item.order_type==2 && item.refund_status==0">待收货</view>
							<view class="huangsetext" style="color:rgba(212, 139, 57, 1);"
								v-if="item.state==3 && item.order_type==1 && item.refund_status==0">待核销</view>
							<!-- <view class="huangsetext" style="color:rgba(212, 139, 57, 1);"
							v-if="item.state==4 && item.refund_status==0">待评论</view> -->
							<view class="huangsetext" style="color:rgba(212, 139, 57, 1);" v-if="item.state==4">待评论
							</view>
							<view class="huangsetext" style="color:rgba(19, 196, 99, 1);" v-if="item.state==6">已完成
							</view>
							<view class="hongsetext" style="color: rgba(255, 0, 0, 1);"
								v-if="item.state==7&&item.refund_status!=3">已取消</view>
							<!-- refund_status 0=未退款,1=退款中,2=待退货,3=退款完成,4=退款关闭,5=退款被拒 -->
							<view class="hongsetext" style="color: rgba(255, 0, 0, 1);"
								v-if="item.refund_status==1 || item.refund_status==2">退货售后中</view>
							<view class="hongsetext" style="color: rgba(19, 196, 99, 1);" v-if="item.refund_status==3">
								退款完成
							</view>
							<view class="hongsetext" style="color: rgba(255, 0, 0, 1);" v-if="item.refund_status==4 ">
								退款关闭
							</view>
							<!-- <view class="hongsetext" style="color:rgba(212, 139, 57, 1);" v-if="item.refund_status==5 ">待收货
						</view> -->
						</view>
						<view class="flexbetween xiahuax margin_top" v-for="ite in item.goods" :key="ite.id">
							<view class="shilitu">
								<image :src="ite.image_text" mode=""></image>
							</view>
							<view class="" style="width: 74%;">
								<view class="yihang text_zi">{{ite.title}}</view>
								<view class="baise">{{ite.difference}}</view>
								<view class="flexbetween">
									<view class="qianshu">¥{{ite.price}}</view>
									<view class="shuliang">X{{ite.number}}</view>
								</view>
							</view>
						</view>
						<!-- 福利商品区 -->
						<view class="flexright margin_top">
							<view class="nostrongtext">合计
								<text class="ershisi" v-if="currenttabtow!=4">￥{{item.pay_price}}</text>
							</view>
						</view>
						<!-- 所有按钮 -->
						<view class="flexright margin_top">
							<view class="huisebtn" v-if="item.state==1|| item.state==2"
								@click.stop="cancelorder(item.id)">
								取消订单
							</view>
							<view class="huangsebtn marginleft3" v-if="item.state==1" @click.stop="atoncePay(item)">立即支付
							</view>
							<view class="huisebtn marginleft3"
								v-if="item.refund_status==0&&item.state==3&&item.order_type!=1"
								@click.stop="tzthsh(item)">
								退款/售后</view>
							<view class="huisebtn marginleft3"
								v-if="item.refund_status!=2&&item.refund_status!=3&&item.state==3&&item.order_type==2"
								@click.stop="tzckwl(item.id)">
								查看物流</view>
							<view class="huangsebtn marginleft3"
								v-if="(item.refund_status==0||item.refund_status==4||item.refund_status==5)&&item.state==3&&item.order_type==2"
								@click.stop="suresh(item.id)">确认收货</view>
							<view class="huisebtn marginleft3"
								v-if="item.refund_status==3||item.state==6||item.state==7"
								@click.stop="deletorder(item.id)">删除订单</view>
							<!-- <view class="huangsebtn marginleft3" v-if="currenttabtow==4">观看视频</view> -->
							<view class="huangsebtn marginleft3" v-if="item.state==3 && item.order_type==1">查看券码</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view v-if="pageThShow">
					<view class="ffffff padding border_2 margin_top" v-for="item in list.data"
						:key="item.order.order_no" @click="thxq(item.id)">
						<view class="flexbetween">
							<view class="flexleft">
								<view class="number margin_right2">订单编号：{{item.order.order_no}}</view>
							</view>
							<!-- 普通订单 -->
							<view class="hongsetext" style="color: rgba(255, 0, 0, 1);" v-if="item.state==0">待审核</view>
							<view class="hongsetext" style="color: #ffa126;" v-if="item.state==1">待寄回</view>
							<view class="hongsetext" style="color: rgba(255, 0, 0, 1);" v-if="item.state==2">卖家拒绝</view>
							<view class="huangsetext" style="color:rgba(19, 196, 99, 1);" v-if="item.state==4">退货已完成
							</view>
							<view class="huangsetext" style="color:rgba(212, 139, 57, 1);" v-if="item.state==5">已关闭
							</view>
							<view class="huangsetext" style="color:rgba(212, 139, 57, 1);" v-if="item.state==6">退货中
							</view>
							<view class="hongsetext" style="color: rgba(255, 0, 0, 1);" v-if="item.state==8">退款失败</view>
						</view>
						<view class="flexbetween xiahuax margin_top" v-for="ite in item.goods" :key="ite.id">
							<view class="shilitu">
								<image :src="ite.image_text" mode=""></image>
							</view>
							<view class="" style="width: 74%;">
								<view class="yihang text_zi">{{ite.title}}</view>
								<view class="baise">{{ite.difference}}</view>
								<view class="flexbetween">
									<view class="qianshu">¥{{ite.price}}</view>
									<view class="shuliang">X{{ite.number}}</view>
								</view>
							</view>
						</view>
						<!-- 所有按钮 -->
						<view class="flexright margin_top">
							<view class="huisebtn">查看详情
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				columns: [],
				currenttabtow: 0, //0全部，1待发货，2待收货，3待取货，4已完成
				list1: [{
						name: '全部',
					},
					{
						name: '待发货',
					},
					{
						name: '待收货',
					},
					{
						name: '待核销',
					},
					{
						name: '退货/售后',
					},
					{
						name: '已完成',
					}
				],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				orderDetail: {}, // 订单详情内容
				pageShow: false,
				pageThShow: false
			}
		},
		onLoad(options) {
			this.currenttabtow = options.value
		},
		onShow() {
			if (this.currenttabtow != 4) {
				this.init()
			} else {
				this.getThList()
			}
		},
		computed: {
			sendState() {
				if (this.currenttabtow == 0) {
					return 0
				} else if (this.currenttabtow == 1) {
					return 2
				} else if (this.currenttabtow == 2) {
					return 3
				} else if (this.currenttabtow == 3) {
					return 3
				} else if (this.currenttabtow == 5) {
					return 6
				}
			}
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				httpRequest.request("api/order/getOrderList", 'GET', {
					page: page || 1,
					limit: _this.limit,
					state: _this.sendState,
					tab_type: _this.currenttabtow == 2 ? 2 : _this.currenttabtow == 3 ? 1 : "" // 1待取货 2待收货
				}, false, false, true).then(res => { //我的订单接口
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
						_this.pageShow = true
						console.log(_this.list.data);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getThList(isPage, page) {
				let _this = this;
				httpRequest.request("api/order/refundList", 'GET', {
					page: page || 1,
					limit: _this.limit,
				}, false, false, true).then(res => { //我的订单接口
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
						_this.pageThShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				if (_this.currenttabtow != 4) {
					_this.init(true, page)
				} else {
					_this.getThList(true, page)
				}
			},
			atoncePay(item) {
				let obj = {
					id: item.order_pay_no, // 支付订单号
					pay_price: item.pay_price, // 支付金额
				}
				uni.navigateTo({
					url: '/pages_index/zhifu?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 跳转查看物流
			tzckwl(id) {
				// uni.navigateTo({
				// 	url: '/pages_my/dingdanxq?id=' + id
				// })
				this.show = true
				this.getOrderInfo(id)
			},
			// 获取订单详情
			getOrderInfo(orderID) {
				let _this = this
				httpRequest.request('api/order/getOrderInfo', 'GET', {
					id: orderID
				}).then(res => {
					if (res.code == 1) {
						_this.orderDetail = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 跳转 申请退款
			tzthsh(item) {
				uni.navigateTo({
					url: '/pages_my/shenqingtk?price=' + item.total_price + '&id=' + item.id
				})
			},
			// 取消订单
			cancelorder(id) {
				httpRequest.modal('提示', '确定取消当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/order/cancelOrder', 'GET', {
							order_id: id,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								this.init()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			// 确认收货
			suresh(id) {
				httpRequest.modal('提示', '请再次确认', true, (res) => {
					if (res) {
						httpRequest.request('api/order/confirmOrder', 'POST', {
							id: id,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								this.init()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			copy() {
				let value = "物流名称：" + this.orderDetail.express_name + " 单号：" + this.orderDetail.express_no
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
						this.show = false
					}
				});
			},
			// 删除订单
			deletorder(id) {
				httpRequest.modal('提示', '确定删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/order/delOrder', 'POST', {
							id,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								this.init()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			tuikuan() {
				uni.navigateTo({
					url: "/pages_my/shenqingtk"
				})
			},
			evaluate() { //立即评价
				uni.navigateTo({
					url: "/pages_my/lijipj"
				})
			},
			xq(id) { //详情
				uni.navigateTo({
					url: "/pages_my/dingdanxq?id=" + id
				})
			},
			thxq(id) { //详情
				uni.navigateTo({
					url: "/pages_my/tuihuoddxq?id=" + id
				})
			},

			close() {
				this.show = false
			},
			clicktabtow(e) {
				this.currenttabtow = e.index;
				if (this.currenttabtow != 4) {
					this.pageThShow = false
					this.init()
				} else {
					this.pageShow = false
					this.getThList()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// /deep/.u-tabs__wrapper__nav__item {
	// 	//平均分配
	// 	flex: 1;
	// }

	.fuzhi {
		margin: 0rpx 30rpx 30rpx 30rpx;
	}

	.dan {
		width: 80vw;
		padding: 64rpx 40rpx 0rpx 40rpx;
	}

	.wuliu {
		font-size: 40rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.zhongtong {

		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 34rpx 82rpx;
		border: 1rpx solid rgba(223, 223, 223, 1);
		border-radius: 10rpx;
		margin: 87rpx 0rpx 0rpx 0rpx;
	}

	.copy {
		padding: 25rpx 150rpx;
		border-radius: 51rpx;
		background-color: RGBA(225, 159, 83, 1);
		margin-top: 109rpx;
		color: #fff;
	}

	.text_zi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.number {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.nostrongtext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.baise {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 12rpx 0rpx;
	}

	.huangsebtn {
		border: 2rpx solid rgba(212, 139, 57, 1);
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(212, 139, 57, 1);
	}

	.huisebtn {
		border: 2rpx solid #666666;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.ershisi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(212, 139, 57, 1);
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
	}

	.shuliang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(212, 139, 57, 1);
	}

	.qianshu {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: rgba(212, 139, 57, 1);
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.shilitu {
		width: 134rpx;
		height: 128rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.lvsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #00C058;
	}

	.huangsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: RGBA(255, 117, 16, 1);
	}

	.hongsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: RGBA(255, 117, 16, 1);
	}

	.marginleft3 {
		margin-left: 30rpx;
	}
</style>